<template>
  <div class="about">
    <div class="flex flex-direction-column align-items-center">
      <VanField label="About" v-model="val" />

      <VanButton @click="pushHome">push Home</VanButton>

      <VanButton @click="pushAbout">push About</VanButton>

      <VanButton @click="replaceAbout">replace About</VanButton>

      <VanButton @click="replaceMySpace">replace MySpace</VanButton>

      <VanButton @click="backHistory">back history -2</VanButton>

      <VanButton @click="forwardHistory">forward history 2</VanButton>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "About",
};
</script>

<script setup lang="ts">
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const val = ref("");

function pushHome() {
  router.push({ name: `Home` });
}

function pushAbout() {
  router.push({ name: "About" });
}

function replaceAbout() {
  router.replace({ name: "About" });
}

function replaceMySpace() {
  router.replace({ name: "MySpace" });
}

function backHistory() {
  router.go(-2);
}

function forwardHistory() {
  router.go(2);
}

onMounted(function () {
  console.log("about onMounted");
});

onUnmounted(function () {
  console.log("about onUnmounted");
});

onActivated(function () {
  console.log("about onActivated");
});

onDeactivated(function () {
  console.log("about onDeactivated");
});
</script>
